<template>
    <div class="cascader">
        <div class="input-wrapper" @click.stop="isSelect = !isSelect">
            <input :value="modelValue" class="input" autocomplete="off" placeholder="请选择" readonly />
            <span :class="['icon', { rolate: isSelect }]">^</span>
        </div>
        <div class="popper" v-if="isSelect">
            <div class="popper-menu" v-if="options.length > 0">
                <ul class="menu-list">
                    <li :class="[{ act: index === selectIndexs[0] }]" v-for="(item, index) in options"
                        :key="index + Math.random()" @click.stop="selectData(item, index)">
                        <span>{{ item.label }}</span>
                        <i class="right-icon" v-if="item.hasOwnProperty('children')">></i>
                    </li>
                </ul>
            </div>
            <template v-for="(opt, ind) in selectIndexs" :key="ind">
                <div class="popper-menu"
                    v-if="selectObj[ind].hasOwnProperty('children') && selectObj[ind].children.length > 0">
                    <ul class="menu-list">
                        <li :class="[{ act: index === selectIndexs[ind + 1] }]"
                            v-for="(item, index) in selectObj[ind].children" :key="index + Math.random()"
                            @click.stop="selectData(item, index, ind + 1)">
                            <span>{{ item.label }}</span>
                            <i class="right-icon" v-if="item.hasOwnProperty('children')">></i>
                        </li>
                    </ul>
                </div>
            </template>
        </div>
    </div>
</template>
<script setup lang="ts">
import { Ref, ref } from "vue"

let props = defineProps({
    options: {
        type: Array
    },
    modelValue: {
        type: String,
    },
    splitStr:{
        type:String,
        default:"/"
    },
    show_all_levels:{
        type:Boolean,
        default:true,
    }
})

const emits = defineEmits(["select","update:model-value"])
//是否点击展开内容
const isSelect: Ref<boolean> = ref(false);

//选择分类的下标
let selectIndexs = ref([]);

//选择内容的id对象信息
let selectIds = ref([]);

//定义一个临时变量，用来保存当前选中的类型
let selectObj = ref([]);
let selectLabels = ref([]);

//定义点击对象的基本信息内容
let selectData = (select, itertorind, selInd = 0) => {
    selectObj.value[selInd] = select;
    selectIndexs.value[selInd] = itertorind;
    selectIds.value[selInd] = select.value;
    selectLabels.value[selInd] = select.label;
    //判断选择以后如果当前内容没有children属性的话直接关闭弹框，就相当于选择
    if (!select.hasOwnProperty("children")) {
        isSelect.value = false;
        console.log(selectIndexs.value.length,selInd);
        if(selectIndexs.value.length > selInd+1 && selectIndexs.value.length>0){
            selectIndexs.value.splice(selInd+1);
            selectObj.value.splice(selInd+1);
            selectIds.value.splice(selInd+1);
            selectLabels.value.splice(selInd+1);
        }

        //判断是否只显示最后一级
        if(!props.show_all_levels){
            selectLabels.value.splice(0,selInd);
        }
        emits("select", [selectIds.value, selectLabels])
        emits("update:model-value",selectLabels.value.join(props.splitStr));
    }
}
//点击空白处隐藏盒子
window.addEventListener("click", (event) => {
    isSelect.value = false;
    // event.stopPropagation();
})
</script>
<style lang="scss" scoped>
ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.cascader {
    width: 250px;
    height: 30px;
    border: #ddd 1px solid;
    border-radius: 3px;
    position: relative;
    cursor: pointer;

    .input-wrapper {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 0px 8px;
        display: flex;
        align-items: center;

        .input {
            flex: 1;
            padding: 0px;
            border: none;
            height: 30px;
            color: #606266;
            cursor: pointer;
        }

        .input::placeholder {
            color: #909296;
        }

        .input:focus {
            border: unset !important;
            // background: #FF0000;
            outline: none;
        }

        .input:checked {
            border-color: #FF0000;
        }

        .icon {
            display: inline-block;
            color: #909296;
            width: 20px;
            text-align: center;
            transition: all 0.5s ease-in-out;
        }

        .rolate {
            transform: rotate(180deg);
        }
    }

    .popper {
        min-width: 200px;
        min-height: 200px;
        position: absolute;
        left: 0px;
        top: 40px;
        border: #ddd 1px solid;
        border-radius: 3px;
        background: #FFF;
        box-shadow: 0 0 12 rgba($color: #000000, $alpha: 0.12);
        transition: all 0.5s linear;
        display: flex;

        .popper-menu {
            min-width: 200px;
            min-height: 200px;
            border-left: #ddd 1px solid;

            ul {
                width: 100%;
                min-height: 100%;
                padding: 6px 0px;
                box-sizing: border-box;

                li {
                    height: 34px;
                    line-height: 34px;
                    font-size: 14px;
                    padding: 0px 30px 0px 20px;
                    box-sizing: border-box;
                    position: relative;
                }

                li:hover {
                    background: #F0F0F0;
                }

                li.act {
                    color: #0088dd;
                }

                .right-icon {
                    position: absolute;
                    right: 10px;
                }
            }
        }
    }

    .popper::before {
        width: 0px;
        position: absolute;
        content: "";
        border: 8px solid;
        border-color: #DDD transparent transparent;
        display: inline-block;
        transform: rotate(180deg);
        top: -16px;
        left: 16px;
    }
}
.cascader:hover{
    border: #606266 1px solid;
}
</style>